<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="商品ID" prop="goods_id">
					<el-input v-model="state.queryParams.goods_id" placeholder="请输入商品ID" clearable @input="onVerifiyNumberIntegerContactId" />
				</el-form-item>
				<el-form-item label="商品名称" prop="title">
					<el-input v-model="state.queryParams.title" placeholder="请输入商品名称" clearable />
				</el-form-item>
				<el-form-item label="关联供应商" prop="supplier_id">
					<el-select
						v-model="state.queryParams.supplier_id"
						clearable
						placeholder="请输入关键字/选择供应商"
						filterable
						remote
						:remote-method="supplierIdRemoteMethod"
						remote-show-suffix
						:loading="state.supplierIdSelect.loading"
						@focus="onSupplierIdFocus"
					>
						<el-option v-for="item in state.supplierIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="商品分类" prop="goods_class_id">
					<el-select
						v-model="state.queryParams.goods_class_id"
						clearable
						placeholder="请输入关键字/选择商品分类"
						filterable
						remote
						:remote-method="goodsClassIdRemoteMethod"
						remote-show-suffix
						:loading="state.goodsClassIdSelect.loading"
						@focus="onGoodsClassIdFocus"
					>
						<el-option v-for="item in state.goodsClassIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="关联品牌" prop="brand_id">
					<el-select
						v-model="state.queryParams.brand_id"
						clearable
						placeholder="请输入关键字/选择商品品牌"
						filterable
						remote
						:remote-method="brandIdRemoteMethod"
						remote-show-suffix
						:loading="state.brandIdSelect.loading"
						@focus="onBrandIdFocus"
					>
						<el-option v-for="item in state.brandIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-row :gutter="10" class="top-block">
				<el-col :span="1.5">
					<el-button type="primary" @click="onOperation({ type: 'add', title: '添加商品' }, '')"> 添加商品 </el-button>
				</el-col>
				<RightToolbar v-model:showSearch="state.showSearch" @queryTable="getList" />
			</el-row>
			<el-tabs v-model="state.queryParams.status">
				<el-tab-pane label="全部" :name="0" />
				<el-tab-pane label="上架" :name="1" />
				<el-tab-pane label="下架" :name="2" />
			</el-tabs>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="商品ID" align="center" prop="id" />
				<el-table-column label="商品主图" align="center" prop="thumb">
					<template #default="{ row }">
						<el-avatar :src="row.thumb" shape="square" />
					</template>
				</el-table-column>
				<el-table-column label="商品名称" align="center" prop="title" />
				<el-table-column label="商品分类" align="center" prop="goods_class_name" />
				<el-table-column label="商品种类" align="center" prop="type" :formatter="formatterType" />
				<el-table-column label="商品品牌" align="center" prop="brand_name" />
				<el-table-column label="关联供应商" align="center" prop="supplier_name" />
				<el-table-column label="价格" align="center" prop="price">
					<template #default="{ row }">
						<div style="text-align: left">
							成本价：{{ row.min_cost_price }}<br />
							售价：{{ row.min_price }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="数量" align="center" prop="stock">
					<template #default="{ row }">
						<div style="text-align: left">
							剩余库存：{{ row.stock_sy }}<br />
							虚拟销量：{{ row.virtual_sales }}<br />
							真实销量：{{ row.real_sales }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="display_order" />
				<el-table-column label="创建时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
				<el-table-column label="状态" align="center" prop="status">
					<template #default="{ row }">
						<el-switch
							:before-change="beforeSwitchChange"
							@change="onStatusChange(row)"
							v-model="row.status"
							:active-value="1"
							:inactive-value="0"
							inline-prompt
							active-text="上架"
							inactive-text="下架"
							style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
						/>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-button type="primary" link @click="onOperation({ type: 'edit', title: '修改商品' }, row)">修改</el-button>
						<el-button type="primary" link @click="onOperation({ type: 'copy', title: '复制商品' }, row)">复制</el-button>
						<el-button type="primary" link @click="onTranslation(row)">翻译管理</el-button>
						<el-button type="primary" link @click="onSkuOperation({ type: 'edit', title: '修改商品库存' }, row)">修改库存</el-button>
						<el-button type="primary" link @click="onOperation({ type: 'view', title: '查看商品' }, row)"> 查看 </el-button>
						<el-button type="primary" link @click="onSkuOperation({ type: 'view', title: '查看商品规格信息' }, row)"> 规格详情 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<OperationDialog ref="operationDialogRef" />
		<SkuOperationDialog ref="skuOperationDialogRef" />
		<TranslateDialog ref="translateDialogRef" />
	</div>
</template>

<script setup lang="ts" name="goodInfo">
import { ElMessage, ElMessageBox } from 'element-plus';
import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';

import { goodsApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';
import { verifiyNumberInteger1 } from '/@/utils/toolsValidate';

const OperationDialog = defineAsyncComponent(() => import('./dialog/operationDialog.vue'));
const SkuOperationDialog = defineAsyncComponent(() => import('./dialog/skuOperationDialog.vue'));
const TranslateDialog = defineAsyncComponent(() => import('./dialog/translateDialog.vue'));

const GoodsApi = goodsApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		goods_id:'',
		status: 0,
		supplier_id: '',
		brand_id: '',
		title: '',
		goods_class_id: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	supplierIdSelect: {
		loading: false,
		options: [] as any,
	},
	goodsClassIdSelect: {
		loading: false,
		options: [] as any,
	},
	brandIdSelect: {
		loading: false,
		options: [] as any,
	},
	switchStatus: false,
});
const queryFormRef = ref();
const operationDialogRef = ref();
const skuOperationDialogRef = ref();
const translateDialogRef = ref();

onMounted(() => {
	getList();
});

watch(
	() => state.queryParams.status,
	() => getList()
)

/********** 触发事件 **********/
// 商品ID过滤
const onVerifiyNumberIntegerContactId = (val:string) => {
	state.queryParams.goods_id = verifiyNumberInteger1(val)
}
// 关联商品分类获取焦点
const onGoodsClassIdFocus = () => {
	if (state.queryParams.goods_class_id) return;
	_goodsSelectClass({ pageNum: 1, pageSize: 10 });
};
// 关联品牌获取焦点
const onBrandIdFocus = () => {
	if (state.queryParams.brand_id) return;
	_goodsSelectGoodsBrand({ pageNum: 1, pageSize: 10 });
};
// 关联供应商获取焦点
const onSupplierIdFocus = () => {
	if (state.queryParams.supplier_id) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10 });
};
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 添加/修改/详情
const onOperation = (data: Object, row: Object) => {
	operationDialogRef.value.openDialog(data, row, () => getList());
};
// 修改库存/查看规格
const onSkuOperation = (data: Object, row: Object) => {
	skuOperationDialogRef.value.openDialog(data, row, () => getList());
};
// 翻译管理
const onTranslation = (row: Object) => {
	translateDialogRef.value.openDialog(row);
};
const beforeSwitchChange = () => {
	state.switchStatus = true;
	return state.switchStatus;
};
// 启用/禁用
const onStatusChange = (row: any) => {
	if (!state.switchStatus) return;
	ElMessageBox.confirm(`您确定${row.status == 1 ? '上架' : '下架'}该数据项？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			return GoodsApi.goodsEditStatus({ status: row.status ? 1 : 2, goods_id: row.id });
		})
		.then(() => {
			ElMessage.success('操作成功！');
			getList()
		})
		.catch(() => {
			row.status = row.status ? 0 : 1;
		});
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_goodsList({
		...state.queryParams,
		status: state.queryParams.status || ''
	});
};
// 关联供应商搜索选择
const supplierIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10, title: query });
};
// 关联商品分类搜索选择
const goodsClassIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectClass({ pageNum: 1, pageSize: 10, name: query });
};
// 关联品牌搜索选择
const brandIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectGoodsBrand({ pageNum: 1, pageSize: 10, name: query });
};
// 商品种类
const formatterType = (row: any) => {
	return row.type === 1 ? '普通商品' : '礼包商品';
};
// 创建时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};

/********** 网络事件 **********/
// 商品列表
const _goodsList = (params: Object) => {
	GoodsApi.goodsList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 选择商品分类
const _goodsSelectClass = (params: Object) => {
	state.goodsClassIdSelect.loading = false;
	GoodsApi.goodsSelectClass(params)
		.then((res) => {
			state.goodsClassIdSelect.options = res.data.list;
		})
		.catch(() => (state.goodsClassIdSelect.loading = false));
};
// 选择供应商
const _goodsSelectSupplier = (params: Object) => {
	state.supplierIdSelect.loading = false;
	GoodsApi.goodsSelectSupplier(params)
		.then((res) => {
			state.supplierIdSelect.options = res.data.list;
		})
		.catch(() => (state.supplierIdSelect.loading = false));
};
// 选择商品品牌
const _goodsSelectGoodsBrand = (params: Object) => {
	state.brandIdSelect.loading = false;
	GoodsApi.goodsSelectGoodsBrand(params)
		.then((res) => {
			state.brandIdSelect.options = res.data.list;
		})
		.catch(() => (state.brandIdSelect.loading = false));
};
</script>
